<template>
    <div class="device_details">
        <my-header
        class="page_header"
        ref="header"
        :isBack="true"
        :backText="backText"
        :is_Level_three_page="true"
        :maxLevelThreePage="true"
        :hadInput="false"
        @backFn="back"
        ></my-header>
        <div class="device_details_box">
            <p class="device_details_title">基本信息</p>
            <div class="device_info">
                <ul>
                    <li>
                        <p>设备名称: <span class="value">{{deviceInfo.deviceName}}</span></p>
                    </li>
                    <li>
                        <p>设备编号: <span class="value">{{deviceInfo.deviceCode}}</span></p>
                    </li>
                    <li>
                        <p>所在部门: <span class="value">{{deviceInfo.departmentName}}</span></p>
                    </li>
                    <li>
                        <p>运行状态: <span class="value">{{deviceInfo.runStatus | statusTransformText}}</span></p>
                    </li>
                </ul>
            </div>
            <p class="device_details_title">设备点巡检<span @click="goOverDue(0)">逾期记录 <iconSvg name="open" w="28px" h="16px" class="arrowRight"></iconSvg></span></p>
            <div class="list_box device_check">
                <div class="mescroll-empty" v-if="showEmptyDevice">
                    <img class="empty-icon" src="/static/img/zwlr-icon.png">
                    <p class="empty-tip">暂无内容</p>
                </div>
                <ul>
                    <li v-for="(item, index) in DeviceCheckList" :key="index" @click="showToast(item.checkLeaderIds)">
                        <div >
                            <div class="time_status">
                                <p class="time">时间：剩余{{item.surplusTime}}</p>
                                <span v-if="hasTag(item.checkLeaderIds) && item.icCardClockPeriod != 0 && item.clockStatus == 0"
                                  class="tag yollow">未打卡</span>
                                <p class="status" v-if="hasTag(item.checkLeaderIds) && item.icCardClockPeriod == 0">{{switchStatus(item.checkSubmitTime, item.startTime, item.endTime)}}</p>
                                <p class="status" v-if="!hasTag(item.checkLeaderIds) && item.icCardClockPeriod == 0">执行中</p>
                            </div>
                            <div class="panel">
                                <p class="person">操作人： <span v-for="(items,index) in item.leaderList" :key="index"
                                ><span v-if="index!==0">,</span>{{items.name}}</span></p>
                                <!-- <button class="btn_box turn" @click="addDeviceTurn(item)">转办</button> -->
                                <button class="btn_box"
                                :disabled="item.icCardClockPeriod != 0 && item.clockStatus == 0 "
                                :class="item.icCardClockPeriod != 0 && item.clockStatus == 0 ? 'btn_disabled' : '' "
                                v-if="hasTag(item.checkLeaderIds)"
                                @click="addDeviceCheck(item)">{{item.icCardClockPeriod != 0 && item.clockStatus == 0 ? '未打卡' : '执行'}}</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <p class="device_details_title">部件点巡检<span @click="goOverDue(1)">逾期记录 <iconSvg name="open" w="28px" h="16px" class="arrowRight"></iconSvg></span></p>
            <div class="list_box components_check">
                <div class="mescroll-empty" v-if="showEmptyComponent">
                    <img class="empty-icon" src="/static/img/zwlr-icon.png">
                    <p class="empty-tip">暂无内容</p>
                </div>
                <ul>
                    <li v-for="(item, index) in ComponentsCheckList" :key="index">
                        <div >
                            <div class="time_status">
                                <div class="card_header">
                                    <p class="time">时间：剩余{{item.surplusTime}}</p>
                                    <span v-if="hasTag(item.checkLeaderIds) &&  item.icCardClockPeriod != 0 && item.clockStatus == 0"
                                      class="tag yollow">未打卡</span>
                                    <p class="status" v-if="hasTag(item.checkLeaderIds) && (item.icCardClockPeriod == 0 || (item.icCardClockPeriod != 0 && item.clockStatus != 0) )">{{switchStatus(item.checkSubmitTime, item.startTime, item.endTime)}}</p>
                                    <p class="status" v-if="!hasTag(item.checkLeaderIds) && item.icCardClockPeriod == 0">执行中</p>
                                </div>
                                <p class="components_name">名称：{{item.componentName}}</p>
                            </div>
                            <div class="panel">
                                <p class="person">操作人： <span v-for="(items,index) in item.leaderList" :key="index"
                                ><span v-if="index!==0">,</span>{{items.name}}</span></p>
                                <!-- <button class="btn_box turn" @click="addComponentturn(item)">转办</button> -->
                                <button class="btn_box"
                                :disabled="item.icCardClockPeriod != 0 && item.clockStatus == 0 "
                                :class="item.icCardClockPeriod != 0 && item.clockStatus == 0 ? 'btn_disabled' : '' "
                                v-if="hasTag(item.checkLeaderIds)"
                                @click="addComponentCheck(item)">{{item.icCardClockPeriod != 0 && item.clockStatus == 0 ? '未打卡' : '执行'}}</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import myHeader from '@/components/common/header'
export default {
    components: {
        myHeader
    },
    data() {
        return {
            backText: '信息详情',
            deviceInfo: {},
            deviceId: '',
            departmentId: '',
            DeviceCheckList: [],
            ComponentsCheckList:[],
            showEmptyDevice: false,
            showEmptyComponent: false,
            userId: ''
        }
    },
    mounted() {
        this.initParams();
         // 获取userId
        this.$http(this.$API.getUserInfo,{},true).then((res) => {
            this.userId = res.id;
        })
        this.getDeviceInfo();

    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            if( from.path == '/operaionManage/addCheck') {
                vm.getDeviceCheck()
                vm.getComponentsCheck()
            }
        })
    },
    methods: {
        back() {
            history.back(-1)
        },
        hasTag(checkLeader) {
            if (checkLeader) {
                return checkLeader.split(',').includes(this.userId)
            }else {
              return false;
            }
        },
        showToast(checkLeader) {
            if (checkLeader) {
                if (!checkLeader.split(',').includes(this.userId)) {
                    this.$vux.toast.text('仅可执行的设备和已完成的设备、<br>部件点巡检记录可以查看', 'bottom')
                }
            }
        },
        // 添加部件点巡检
        addComponentCheck(config) {
            setTimeout(() => {
                this.$router.push({
                    path: `/operaionManage/addCheck`,
                    query: {
                        listType: 0,
                        id: config.id,
                        componentId: config.componentId,
                        deviceId: this.deviceId,
                        departmentId: config.departmentId,
                        sheetType: 1, //工单类型 1： 点巡检工单 2：更换工单
                        type: 3
                    }
                })
            }, 200);
        },
        // 添加设备点巡检
        addDeviceCheck(config) {
            setTimeout(() => {
                this.$router.push({
                    path: `/operaionManage/addCheck`,
                    query: {
                        listType: 0,
                        id: config.id,
                        deviceId: this.deviceId,
                        departmentId: config.departmentId,
                        sheetType: 1, //工单类型 1： 点巡检工单 2：更换工单
                        type: 2
                    }
                })
            }, 200);
        },
        goOverDue(n) {
            if (n == 0) {
                this.$router.push(
                    {
                        path: '/operaionManage/spotCheck/overdue',
                        query: {
                            tabIndex: 0,
                            deviceId: this.deviceId,
                            departmentId: this.departmentId
                        }
                    }
                )
            } else {
              this.$router.push(
                    {
                        path: '/operaionManage/spotCheck/overdue',
                        query: {
                            tabIndex: 1,
                            deviceId: this.deviceId,
                            departmentId: this.departmentId
                        }
                    }
                )
            }
        },
        // 匹配状态
        switchStatus(time, start_time, end_time) {
            let currentTime = new Date().getTime()
            if (time) {
              if(time > end_time) {
                return '逾期执行'
              } else {
                 return '已执行'
              }
            } else {
              if (currentTime < start_time) {
                return '待执行'
              } else if( start_time < currentTime && currentTime < end_time) {
                return '可执行'
              } else if(currentTime > end_time) {
                return '已逾期'
              } else {
                return '-'
              }
            }
        },
        // 初始化路由传参
        initParams() {
            let params = this.$route.query;
            this.deviceId = params.deviceId;
        },
        // 获取设备下设备和部件的点巡检
        getDeviceInfo: function() {
          console.log("参数:"+this.deviceId)
            this.$http(this.$API.loadDeviceInfo, {deviceId:this.deviceId}, true).then((res) => {
              console.log("获取设备信息")
              console.log(res)
                this.deviceInfo = res;
                this.departmentId = res.departmentId;
                this.getDeviceCheck();
            })
        },
        // 获取设备点巡检可执行记录
        getDeviceCheck() {
            this.$http(this.$API.scancodeQueryCheckList, {deviceId:this.deviceId,departmentId:this.departmentId,pageNum:1,pageSize:100}, true).then((res) => {
                if(res) {
					console.log("返回的结果")
					console.log(res)
                  this.showEmptyDevice = true;
                  this.showEmptyComponent = true;
                  if(res.deviceRecordList.length > 0) {
                    this.showEmptyDevice=false;
                  }
                  if(res.componentRecordList.length > 0) {
                    this.showEmptyComponent = false;
                  }
                  this.DeviceCheckList = res.deviceRecordList;
                  this.ComponentsCheckList = res.componentRecordList;
                }
            })
        },
        listSort(data) {
            console.log("排序前",data);
            let canExecute = [],//状态为可执行的数组
                overdueList = [];//状态为其他的数组

            for(var index in data){
              if(data[index].status == 4){
                var checkRecord = data[index];
                canExecute.push(checkRecord)
              }
              else{
                overdueList.push(data[index]);
              }
            }

            let executeList = [];
            for(var index in canExecute){
              if((canExecute[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                executeList.unshift(canExecute[index])
              }else{
                executeList.push(canExecute[index]);
              }
            }

            let overList = [];
            for(var index in overdueList){
              if((overdueList[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                overList.unshift(overdueList[index])
              }else{
                overList.push(overdueList[index]);
              }
            }
            data = executeList.concat(overList);
            console.log("排序后",data);
            return data;
        }
    },
}
</script>

<style lang="less" scoped>
  .btn_disabled {
    background: #7E7F94 !important;
    border: 1px solid #7E7F94 !important;
  }
  .tag {
    color: #4266d6;
    float: right;
    font-size: 15px;
  }
  .yollow {
    color: #DD9710;
  }
    .device_details{
        background: #22233F;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: auto;
        .page_header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
        }
        .device_details_box{
            padding: 0 16px 22px;
            margin-top: 45px;
            height: calc(~"100% - 45px");
            box-sizing: border-box;
            overflow-y: scroll;
            .device_details_title{
                font-size: 24px;
                color: #fff;
                padding: 20px 0 12px;
                span{
                    float: right;
                    font-size: 14px;
                    margin-right: -8px;
                    color: rgba(255,255,255,.6);
                    line-height: 33px;
                    .arrowRight{
                        transform: rotate(-90deg);
                        transform-origin: 50% 50%;
                        margin-left: -5px;
                    }
                }
            }
            .device_info{
                background: #292A4D;
                ul{
                    padding: 14px 8px;
                    li{
                        p{
                            color: rgba(255,255,255,0.6);
                            font-size: 15px;
                            line-height: 21px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            .value{
                               color: #fff;
                               margin-left: 15px;
                            }
                        }
                        &:not(:last-child){
                            margin-bottom: 10px;
                        }
                    }
                }
            }
            .list_box{
                .mescroll-empty{
                    padding-top: 50px;
                    .empty-icon{
                        width: 64px;
                        height: 64px;
                        margin-left: 22px;
                    }
                    .empty-tip{
                        color: #4F77C0;
                    }
                }
                ul{
                    li{
                        background: #292A4D;
                        border-radius: 4px;
                        margin-bottom: 12px;
                        .time_status{
                            display: flex;
                            padding: 8px;
                            box-sizing: border-box;
                            font-size: 17px;
                            color: #fff;
                            border-bottom: 1px solid rgba(255,255,255,.1);
                            .time{
                                flex: 1;
                            }
                            .status{
                                font-size: 15px;
                                color: #456DE6;
                            }
                        }
                        .panel{
                            display: flex;
                            padding: 8px;
                            box-sizing: border-box;
                            .person{
                                flex: 1;
                                font-size: 15px;
                                color: rgba(255,255,255,.6);
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 white-space: nowrap;
                            }
                            .btn_box{
                                border: none;
                                outline: none;
                                background: #456DE6;
                                color: #fff;
                                border-radius: 2px;
                                padding: 2px 28px;
                                &.turn{
                                    margin-right: 10px;
                                    background: #292a4d;
                                    border: 1px solid #456de6;
                                    color: #4266d6;
                                }
                            }
                        }
                    }
                }
                &.components_check{
                    .time_status{
                        display: block;
                        .components_name{
                            font-size: 14px;
                            color: rgba(255,255,255,.6);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .card_header{
                            display: flex;
                        }
                    }
                }
            }
        }
    }
</style>
